<template>
  <div class="address-edit-box page" ref="webview">
    <div ref="wrapper">
      <van-nav-bar class="bg_grey" :title="($route.params.type === 'edit'?'编辑':'添加')+'收货地址'" left-arrow @click-left="$router.go(-1)" />
      <div class="address">
        <van-field v-model="form.name" label="收货人" clearable placeholder="请输入收货人" />
        <van-field v-model="form.mobile" maxlength='11' label="手机号码" type="tel" clearable placeholder="请输入手机号码" />
        <van-cell title="所在地区">
          <div slot="right-icon" @click="isAreaList=true" class="region">
            <template v-if="!form.provName && !form.cityName && !form.areaName">
              选择省 / 市 / 区
            </template>
            <template v-else>
              {{form.provName?form.provName+' / ':''}}{{form.cityName?form.cityName+' / ':''}}{{form.areaName}}
            </template>
          </div>
        </van-cell>
        <van-field v-model="form.address" rows="1" clearable autosize label="详细地址" type="textarea" placeholder="请输入详细地址" />
        <div class="setup-adderss">
          <div class="rows">
            <span class="title">设置默认地址</span>
            <van-switch v-model="form.isDefault" class="switch" size="20" active-color="#FF0034" inactive-color="#c5cee1" />
          </div>
          <div class="tis">提醒：每次下单时会使用该地址，实际下单地址会根据您购物切 换的地区进行智能判断，请在下单时确认哦！</div>
        </div>
      </div>
      <div class="subnitBtn">
        <van-button color="#FF0034" round class="btn" :loading="isLoading" @click.native="submitAddress">确认{{$route.params.type === 'edit'?'修改':'提交'}}</van-button>
        <div class="del" v-if="$route.params.type === 'edit'" @click="addressDelete">删除地址</div>
      </div>
      <van-popup v-model="isAreaList" position="bottom" get-container="#app">
        <van-area :area-list="areaList" @change="onChangeDetail" @confirm="confirmArea" @cancel="isAreaList=false" :value="form.areaCode" :columns-placeholder="['请选择', '请选择', '请选择']" />
      </van-popup>
    </div>
  </div>
</template>
<script>
import areaList from '@/plugins/areaList';
import { setTimeout } from 'timers';
export default {
  name: 'addressEditAdd',
  data () {
    return {
      areaList,
      isLoading: false,
      isAreaList: false,
      area: {
        provName: '',
        cityName: '',
        areaName: '',
        areaCode: ''
      },
      form: {
        name: '',
        mobile: '',
        provCode: '',
        provName: '',
        cityCode: '',
        cityName: '',
        areaCode: '',
        areaName: '',
        address: '',
        isDefault: 0
      },
      addressDetail: '',
      searchResult: []
    };
  },
  created () {
    this.$route.params.type === 'edit' && this.getAddressInfo();
  },
  methods: {
    addressDelete () {
      this.$dialog.confirm({
        title: '温馨提醒',
        message: '你确定要删除该地址吗',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$API.user.address({ id: this.$route.query.id }, 'delete').then(res => {
          this.$toast('删除成功');
          setTimeout(() => {
            this.$router.go(-1);
          }, 800);
        });
      }).catch(() => {
        // on cancel
      });
    },
    getAddressInfo () {
      this.$toast.loading({ duration: 0 });
      this.$API.user.address({ id: this.$route.query.id }, 'edit').then(res => {
        var data = res.data.entity;
        this.form = {
          name: data.name,
          mobile: data.mobile,
          provCode: data.provCode,
          provName: data.provName,
          cityCode: data.cityCode,
          cityName: data.cityName,
          areaCode: data.areaCode,
          areaName: data.areaName,
          address: data.address,
          isDefault: data.isDefault === 1
        };
        this.$toast.clear();
      });
    },
    submitAddress () {
      if (this.form.name === '') {
        this.$toast('请填写收货人名称');
        return;
      }
      if (this.form.mobile === '') {
        this.$toast('请填写收货人手机');
        return;
      }
      var isPhone = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile));
      if (isPhone) {
        this.$toast('请输入正确的手机号!');
        return;
      }
      if (this.form.provName === '') {
        this.$toast('请选择省');
        return;
      }
      if (this.form.cityName === '') {
        this.$toast('请选择市');
        return;
      }
      if (this.form.areaName === '') {
        this.$toast('请选择区');
        return;
      }
      if (this.form.address === '') {
        this.$toast('请输入具体位置');
        return;
      }
      this.form.isDefault = this.form.isDefault ? 1 : 0;
      if (this.$route.params.type === 'edit') {
        this.form.id = this.$route.query.id;
      }
      this.isLoading = true;
      this.$API.user.address(this.form, 'save').then(res => {
        this.$toast((this.$route.params.type === 'edit' ? '修改' : '添加') + '成功');
        setTimeout(() => {
          this.$router.go(-1);
        }, 800);
        this.isLoading = false;
      });
    },
    confirmArea (data) {
      if (!this.area.provName) {
        this.$toast('请选择省');
        return;
      }
      if (!this.area.cityName) {
        this.$toast('请选择市');
        return;
      }
      if (!this.area.areaName) {
        this.$toast('请选择区');
        return;
      }
      this.form.provName = this.area.provName;
      this.form.cityName = this.area.cityName;
      this.form.areaName = this.area.areaName;
      this.form.cityCode = this.area.areaCode;
      this.isAreaList = false;
    },
    onChangeDetail (el, data) {
      console.log(data);
      var province = data[0] && data[0];
      var city = data[1] && data[1];
      var county = data[2] && data[2];
      this.area.provName = province && province.name;
      this.area.cityName = city && city.name;
      this.area.areaName = county && county.name;
      this.form.provCode = province && province.code;
      this.form.cityCode = city && city.code;
      this.area.areaCode = county && county.code;
    }

  }
};
</script>
<style lang="less" scoped>
.address-edit-box {
  .subnitBtn {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    padding: 0 40px;
    .btn {
      width: 100%;
      .van-button__text {
        font-size: 34px;
      }
    }
    .del {
      color: #969aa6;
      text-align: center;
      line-height: 80px;
      margin-top: 10px;
      font-size: 34px;
    }
  }
  .setup-adderss {
    padding: 39px;
    .rows {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 30px;
        color: #666;
      }
    }
    .tis {
      color: #353535;
      font-size: 24px;
      padding: 30px 0;
      font-weight: 300;
    }
  }
  .region {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    color: #969799;
    padding: 30px 0 30px 180px;
    &::after {
      content: '';
      display: inline-block;
      width: 14px;
      position: absolute;
      right: 35px;
      top: 50%;
      margin-top: -12px;
      height: 24px;
      background-image: url('/static/images/icon-arrow-right.png');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 14px 24px;
      vertical-align: middle;
      margin-left: 32px;
    }
  }
}
</style>
